<template>
	<view class="earnings">
		<view class="uni-flex">
			<view class="flex-item" :class="{ active: active == '分佣' }" @click="cut('分佣')"><text>分佣</text></view>
			<view class="flex-item" :class="{ active: active == '返利' }" @click="cut('返利')"><text>返利</text></view>
			<view class="flex-item" :class="{ active: active == '分红' }" @click="cut('分红')"><text>分红</text></view>
		</view>
		<view class="statistics">
			{{ active }}总额：
			<text>{{total}}</text>
		</view>
		<view v-for="(item, index) in dataList" :key="index" class="list">
			<view class="p">
				下单时间：
				<text>{{item.orderGmtTime}}</text>
			</view>
			<view class="p">
				订单编号：
				<text>{{item.orderId}}</text>
			</view>
			<view class="p">
				所属代理：
				<text v-if="active == '返利'">{{item.orderAgentName}}</text>
				<text v-if="active == '分佣'">{{item.agentName}}</text>
			</view>
			<view class="p">
				订单金额：
				<text>￥{{item.orderPrice}}</text>
			</view>
			<view class="p money">
				获得{{ active }}：
				<text v-if="active == '返利'">￥{{item.rebateAmount}}</text>
				<text v-if="active == '分佣'">￥{{item.commissionAmount}}</text>
			</view>
		</view>
		<view class="notavailable" v-if="dataList.length==0">
			<image src="../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
		
		<view class="pagination" v-if="pagination">
			<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
				<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
				上一页
			</view>
			<view class="center">{{ paging.page }}/{{ paging.total }}</view>
			<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
				下一页
				<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		uniIcons
	} from '@dcloudio/uni-ui';
	import earnings from '../../servers/agent/earnings.js'
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				active: '分佣',
				dataList: [],
				total:'',	
				paging: {
					page: 1,
					total: 100
				},
				pagination:true
			};
		},
		mounted() {
			this.commission();
			this.commissiontotal();
		},
		methods: {		
			// 分佣2
			commission() {
				uni.showLoading({
					title: '数据加载中'
				})
				var obj={
					currentPage: this.paging.page,
					pageSize: 10
				}
				earnings.initData(obj).then(res => {
						if (res.code==200) {
							if(res.data.records.length>0){
								this.paging.total = Math.ceil(res.data.total / res.data.size);
								this.dataList = res.data.records;
								this.pagination=true
							}else{
								this.pagination=false
							}
							console.log(res.data)
							
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
						uni.hideLoading();
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			},
			// 分佣总计
			commissiontotal() {
				uni.showLoading({
					title: '数据加载中'
				})
				earnings.commissiontotal().then(res => {
						if (res.data) {
							uni.hideLoading();
							console.log(res.data)
							this.total = res.data;
						}
			
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			},
			// 返利
			rebate() {
				uni.showLoading({
					title: '数据加载中'
				})
				var obj={
					currentPage: this.paging.page,
					pageSize: 10
				}
				earnings.rebate(obj).then(res => {
						if (res.code==200) {
							if(res.data.records.length>0){
								this.paging.total = Math.ceil(res.data.total / res.data.size);
								this.dataList = res.data.records;
								this.pagination=true
							}else{
								this.pagination=false
							}
							console.log(res.data)
							
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
						uni.hideLoading();
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			},
			// 返利总计
			rebatetotal() {
				uni.showLoading({
					title: '数据加载中'
				})
				earnings.rebatetotal().then(res => {
						if (res.data) {
							uni.hideLoading();
							console.log(res.data)
							this.total = res.data;
						}
			
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			},
			// 分红
			bonus() {
				uni.showLoading({
					title: '数据加载中'
				})
				var obj={
					currentPage: this.paging.page,
					pageSize: 10
				}
				earnings.bonus(obj).then(res => {
						if (res.code==200) {
							if(res.data.records.length>0){
								this.paging.total = Math.ceil(res.data.total / res.data.size);
								this.dataList = res.data.records;
								this.pagination=true
							}else{
								this.pagination=false
							}
							console.log(res.data)
							 
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
						uni.hideLoading();
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			},
			// 分红总计
			bonustotal() {
				uni.showLoading({
					title: '数据加载中'
				})
				earnings.bonustotal().then(res => {
						if (res.data) {
							uni.hideLoading();
							
							 this.total = res.data;
						}
			
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			},
			pagingchange(e) {
				console.log(e);
			},
			cut(e) {
				this.active = e;
				this.paging.page=1
				this.dataList=[];
				if(e=='分佣'){
					this.commission();
					this.commissiontotal();
				}
				if(e=='返利'){
					this.rebate();
					this.rebatetotal();
				}
				if(e=='分红'){
					this.bonus();
					this.bonustotal();
				}
			},
			next() {
				if (this.paging.page < this.paging.total) {
					this.paging.page += 1;
					if(this.active=='分佣'){
						this.commission();
						this.commissiontotal();
					}
					if(this.active=='返利'){
						this.rebate();
						this.rebatetotal();
					}
					if(this.active=='分红'){
						this.bonus();
						this.bonustotal();
					}
				}
				
			},
			prev() {
				if (this.paging.page > 1) {
					this.paging.page -= 1;
					if(this.active=='分佣'){
						this.commission();
						this.commissiontotal();
					}
					if(this.active=='返利'){
						this.rebate();
						this.rebatetotal();
					}
					if(this.active=='分红'){
						this.bonus();
						this.bonustotal();
					}
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.earnings {
		padding-top: 89rpx;

		.uni-flex {
			position: fixed;
			top: 0;
			width: 100%;
			display: flex;
			flex-direction: row;
			box-shadow: 5rpx 0px 20rpx #c5c5c5;

			.flex-item {
				font-size: 28rpx;
				font-weight: 900;
				width: 33.3%;
				height: 89rpx;
				text-align: center;
				line-height: 89rpx;
				background: #ffffff;
			}

			.flex-item.active {
				text {
					color: #bd3c8c;
					border-bottom: 3rpx solid #bd3c8c;
				}
			}
		}

		.statistics {
			margin: 32rpx 20rpx;
			line-height: 118rpx;
			text-align: center;
			color: #f70225;
			font-size: 28rpx;
			background: #ffffff;
			border-radius: 10rpx;
			box-shadow: 3rpx 0px 20rpx #c5c5c5;

			text {
				font-size: 32rpx;
			}
		}

		.list {
			margin: 13rpx 20rpx;
			padding: 0 16rpx;
			background: #ffffff;
			border-radius: 10rpx;
			box-shadow: 3rpx 0px 20rpx #c5c5c5;

			.p {
				border-bottom: 1px solid #e1e1e1;
				line-height: 104rpx;
				font-size: 28rpx;

				text {
					color: #999999;
				}
			}

			.money {
				border-bottom: none;

				text {
					font-size: 30rpx;
					color: #f70225;
				}
			}
		}

		.pagination {
			margin: 50rpx 20rpx;
			text-align: center;
			line-height: 80rpx;

			.center {
				width: 176rpx;
				height: 80rpx;
				display: inline-block;
				margin: 0 43rpx;
				color: #666666;
				background: #ffffff;
				border-radius: 6rpx;
				border: 1px solid #d0d0d0;
				box-sizing: border-box;
			}

			.left,
			.right {
				width: 220rpx;
				height: 80rpx;
				background: #bd3c8c;
				color: #fff;
				border-radius: 6rpx;
				box-sizing: border-box;
			}

			.forbid {
				background: #ffffff;
				border: 1px solid #d0d0d0;
				color: #aaaaaa;

				.icons {
					color: #aaaaaa !important;
				}
			}
		}
	}
</style>
